<template>
	<div class="detail">
		<div class="title">{{ zcObj.a }}</div>
		<div class="b-tab">
			<div v-for="(pre, index) in zcObj.tabList" :key="index">
				{{ pre }}
			</div>
		</div>
		<div class="tip">{{ zcObj.a1 }} {{ zcObj.a3 }}</div>
		<div class="from-style" v-html="zcObj.a2"></div>
		<div class="news-bo" @click="toDown" v-if="zcObj && zcObj.a5">
			<img src="https://zx-1311146360.cos.ap-shanghai.myqcloud.com/shouye/xiazai.svg" alt="" />
			<div>附件：{{ zcObj.a }}</div>
			<div>下载</div>
		</div>
		<div style="height: 60px"></div>
	</div>
</template>
<script>
	import { info } from './info1.js';
	export default {
		name: 'detail',
		/*1. Vue扩展 */
		extends: '', // extends和mixins都扩展逻辑，需要重点放前面
		mixins: [],
		components: {},
		/* 2. Vue数据 */
		props: {},
		model: { prop: '', event: '' }, // model 会使用到 props
		data() {
			return {
				zcObj: {},
			};
		},
		computed: {},
		watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
		/* 3. Vue资源 */
		filters: {},
		directives: {},
		/* 4. Vue生命周期 */
		created() {
			this.zcObj = JSON.parse(sessionStorage.getItem('zcObj'));
		},
		mounted() {},
		destroy() {},
		/* 5. Vue方法 */
		methods: {
			goUrl(url) {
				// this.$router.push({
				// 	name: url,
				// });
			},
			searchC() {
				const list = JSON.parse(JSON.stringify(info));
				this.showList = list
					.filter((pre) => pre.TAG === this.$route.query.type)
					.filter((val) => val.a.indexOf(this.cname) > -1);
			},
			toDetail(item) {
				sessionStorage.setItem('zcObj', JSON.stringify(item));
			},
			getUrlParam(name) {
				const queryStr = String(window.location).split('?')[1] || '';
				name = encodeURIComponent(name);
				let arr = new RegExp('(^|&)' + name + '=([^&]*)(&|$)').exec(queryStr);
				if (arr) {
					return decodeURIComponent(RegExp.$2);
				} else {
					return '';
				}
			},
			toDown() {
				// this.$router.push({
				// 	path: '/policy/showPdf',
				// 	query: {
				// 		pdfUrl: this.zcObj.a5.split(',')[0],
				// 	},
				// });
				let url = this.zcObj.a5.split(',')[0];
				let pfileUrl =
					'http://www.pfile.com.cn/api/profile/onlinePreview?url=' + encodeURIComponent(url);
				window.open(pfileUrl);

				// const url = this.zcObj.a5.split(',')[0];
				// const filename = this.zcObj.a;
				// if (!url) {
				// 	this.$toast('暂时无法下载');
				// 	return;
				// }
				// // window.open(url)
				// const a = document.createElement('a');
				// a.style.display = 'none';
				// a.href = url;
				// a.download = filename;
				// // 使用target="_blank"时，添加rel="noopener noreferrer" 堵住钓鱼安全漏洞 防止新页面window指向之前的页面
				// a.rel = 'noopener noreferrer';
				// document.body.append(a);
				// a.click();
				// setTimeout(() => {
				// 	a.remove();
				// }, 1000);
			},
		}, // all the methods should be put here in the last
	};
</script>
<style scoped lang="scss">
	.detail {
		height: 100vh;
		overflow-y: auto;
		padding: 0 12px;
		.title {
			margin: 20px 0 10px 0;
			font-size: 18px;
			font-weight: 600;
		}
		.b-tab {
			display: flex;
			flex-wrap: wrap;
			font-size: 13px;
			color: #3282e4;
			font-family: Source Han Sans SC;
			font-weight: 400;
			font-size: 12px;
			margin: 5px 0;
			& > div {
				height: 18px;
				background: #e4efff;
				line-height: 18px;
				padding: 0 5px;
				margin-right: 3px;
				margin-bottom: 3px;
			}
		}
		.tip {
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			font-size: 13px;
			color: #989898;
			margin-bottom: 18px;
		}
		.news-bo {
			height: 50px;
			background: #fcfcfc;
			border: 1px solid #dddddd;
			display: flex;
			align-items: center;
			padding-left: 23px;
			margin-top: 50px;
			& > div:first-of-type {
				flex: 1;
				font-size: 13px;
				font-family: Source Han Sans SC;
				font-weight: 400;
				color: #000000;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			& > div:last-of-type {
				border-left: 1rpx solid #dddddd;
				margin-left: auto;
				height: 16px;
				width: 60px;
				line-height: 16px;
				text-align: center;
				font-size: 13px;
				font-family: Source Han Sans SC;
				font-weight: 400;
				color: #3282e4;
				flex-shrink: 0;
			}
			img {
				width: 25px;
				margin-right: 6px;
			}
		}
		::v-deep.from-style {
			line-height: 23px;
		}
		::v-deep.from-style span {
			font-size: 15px !important;
		}
		::v-deep.from-style p {
			font-size: 15px !important;
		}
	}
</style>
